<template>
  <div class="online-sale">
    <div class="naviga">数据采集&nbsp;>&nbsp;用户访谈</div>
    <div class="border-r margin-top">
      <div class="el-tabs__content">
        <div class="col-xs-12 margin-top">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="访谈日期">
              <el-date-picker
                v-model="date"
                value-format="yyyy-MM-dd"
                @change="changeDate"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="访谈类型">
              <el-select v-model="formInline.interviewType" placeholder="访谈类型">
                <el-option label="全部" value="ALL"></el-option>
                <el-option v-for="items in typeOptions" :label="items.entry" :value="items.entry"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="筛选城市">
              <el-select v-model="formInline.city" placeholder="筛选城市">
                <el-option label="全部" value="ALL"></el-option>
                <el-option v-for="items in cityOptions" :label="items" :value="items"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="有无图片">
              <el-select v-model="formInline.picturesMark" placeholder="有无图片">
                <el-option label="全部" value="ALL"></el-option>
                <el-option label="有" value="1"></el-option>
                <el-option label="无" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="关联产品">
              <el-select v-model="formInline.associatedProductorModal" placeholder="关联产品" @change="getMap">
                <el-option label="全部" value="0"></el-option>
                <el-option v-for="items in productOptions" :label="items.productName" :value="items.productId"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="用户地图">
              <el-select v-model="formInline.associatedMap" placeholder="用户地图">
                <el-option label="全部" value="ALL"></el-option>
                <el-option v-for="items in mapOptions" :label="items.secondCategory" :value="items.secondCategory"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="getData">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <div class="margin-top col-xs-12">
      <div class="charts ">
        <div class="charts-box">
          <div class="chart chart-bg-1">
            {{topData.UserInterviewTotal || '暂无数据'}}
          </div>
          <div class="chart-des">访谈累计数量</div>
        </div>
        <div class="charts-box">
          <div class="chart chart-bg-2">
            {{topData.NoReadCnt || '暂无数据'}}
          </div>
          <div class="chart-des">未读数量</div>
        </div>
        <div class="charts-box">
          <div class="chart chart-bg-3">
            {{topData.PicCnt || '暂无数据'}}
          </div>
          <div class="chart-des">图片数量</div>
        </div>
        <div class="charts-box">
          <div class="chart chart-bg-4">
            {{topData.CityCnt || '暂无数据'}}
          </div>
          <div class="chart-des">地区数量</div>
        </div>
        <div class="charts-box">
          <el-button type="primary" plain @click="addRe">+&nbsp;添加访谈</el-button>
        </div>

      </div>
    </div>
    <div class="border-r margin-top">
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="interviewTime"
          label="访谈时间">
        </el-table-column>
        <el-table-column
          prop="interviewType"
          label="访谈类型">
        </el-table-column>
        <el-table-column
          prop="associatedProductor"
          label="关联产品">
        </el-table-column>
        <el-table-column
          prop="associatedMap"
          label="用户地图">
        </el-table-column>
        <el-table-column
          prop="picturesMark"
          label="有无图片">
        </el-table-column>
        <el-table-column
          prop="creator"
          label="访谈者">
        </el-table-column>
        <el-table-column
          prop="readMark"
          label="阅读状态">
        </el-table-column>
        <el-table-column
          prop=""
          label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="showDetail(scope.row.interviewId)">查看详情</el-button>
            <el-button @click="deleteData(scope.row.interviewId)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="padding: 20px"
        background
        align="center"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <!--模态框用以显示增加访谈-->
    <div class="modal fade" id="classManage">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <div class="naviga">新增访谈</div>
          </div>
          <div class="modal-body">
            <div class="row">
              <el-col :span="24">
                <div class="border-r">
                  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-form-inline">
                    <el-form-item label="访谈标题" prop="interviewTitle">
                      <el-input v-model="ruleForm.interviewTitle"></el-input>
                    </el-form-item>
                    <el-form-item label="访谈内容" prop="interviewText">
                      <el-input v-model="ruleForm.interviewText" type="textarea"></el-input>
                    </el-form-item>
                    <el-form-item label="访谈类型" prop="interviewType">
                      <el-select v-model="ruleForm.interviewType" placeholder="访谈类型">
                        <el-option v-for="items in typeOptions" :label="items.entry" :value="items.entry"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="访谈城市" prop="city">
                      <el-select v-model="ruleForm.city" placeholder="访谈类型">
                        <el-option v-for="items in cityOptions" :label="items" :value="items"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="关联产品" prop="associatedProductor">
                      <el-select v-model="ruleForm.associatedProductor" placeholder="关联产品">
                        <el-option v-for="items in productOptions" :label="items.productName" :value="items.productName"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="关联地图" prop="associatedMap">
                      <el-select v-model="ruleForm.associatedMap" placeholder="关联地图">
                        <el-option v-for="items in mapOptions" :label="items.secondCategory" :value="items.secondCategory"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="访谈图片" prop="interviewPictureList">
                      <div class="avatar-box" v-for="(items,index) in imageUrl" >
                        <img :src="'http://'+items" class="avatar">
                        <div class="text-center">
                          <el-button round class="margin-top" @click="removeImg(index)">移除</el-button>
                        </div>
                      </div>
                      <el-upload
                        class="avatar-uploader"
                        action="/file/uploadFile"
                        name="file"
                        :data="uploadConfig"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        accept="image/png,image/jpg,image/jpeg"
                        :before-upload="beforeAvatarUpload">
                        <i  class="el-icon-plus avatar-uploader-icon"></i>
                      </el-upload>
                    </el-form-item>
                  </el-form>
                </div>
              </el-col>
            </div>
          </div>
          <div class="modal-footer">
            <div class="text-center">
              <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
              <button type="button" class="el-button el-button--info" data-dismiss="modal">取消</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--模态框显示查看详情-->
    <div class="modal fade bs-example-modal-lg" id="detail">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <div class="naviga">数据采集&nbsp;>&nbsp;用户访谈&nbsp;>&nbsp;查看详情</div>
          </div>
          <div class="modal-body" style="background-color: #F6F6F6">
            <div class="row">
              <el-col :span="24">
                <div class="border-r">
                  <div class="title">
                    市场调研内容详情-{{detail.interviewType}}
                  </div>
                  <div style="padding-left: 15px;padding-right: 15px;padding-top: 15px">
                    <h2>{{detail.interviewTitle}}</h2>
                    <div>
                      <div class="research-box">
                        <span style="color: #BEBEBE">访谈人:</span>
                        <span>{{detail.creator}}</span>
                      </div>
                      <div class="research-box">
                        <span style="color: #BEBEBE">访谈时间:</span>
                        <span>{{detail.interviewTime}}</span>
                      </div>
                    </div>
                    <p style="padding-bottom: 15px">{{detail.interviewText}}</p>
                    <div class="avatar-box" v-for="(items,index) in detail.pictureList" >
                      <img :src="'http://'+items.pictureI" class="avatar">
                    </div>
                  </div>
                </div>
              </el-col>
            </div>
          </div>
          <div class="modal-footer">
            <div class="text-center">
              <el-button type="primary" >确认</el-button>
              <button type="button" class="el-button el-button--info" data-dismiss="modal">取消</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style  lang="less" scoped>
  .el-tabs__item.is-active{
    border-bottom: 2px solid #409eff;
  }
  .charts {
    width: 100%;
    display: inline-flex;
    justify-content: space-between;
    background: #fff;
    border-radius: 5px;
    padding: 15px;
  }

  .charts-box {
    margin-right: 15px;
  }
  .chart {
    position: relative;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    text-align: center;
    line-height: 110px;
    font-size: 18px;
    color:#868686;
    z-index: 1;
    display: block;

    &::after {
      content: '';
      display: block;
      position: absolute;
      top: 10%;
      left: 10%;
      width: 80%;
      height: 80%;
      background: #fff;
      border-radius: 50%;
      z-index: -1;
    }
    &:hover{
      transform: scale(1.1);
      color: #000;
    }
  }
  .chart-des{
    margin-top: 10px;
    display: block;
    text-align: center;
  }
  .chart-bg-1 {
    background: linear-gradient(left bottom, #fb9292, #f5da63);
    box-shadow: 0 0 20px #fb9292;
  }

  .chart-bg-2 {
    background: linear-gradient(left bottom, #5bd77b, #d7e770);
    box-shadow: 0 0 20px #5bd77b;
  }

  .chart-bg-3 {
    background: linear-gradient(left bottom, #40c6cf, #4df195);
    box-shadow: 0 0 20px #40c6cf;
  }

  .chart-bg-4 {
    background: linear-gradient(left bottom, #5ed77b, #d7e76f);
    box-shadow: 0 0 20px #5ed77b;
  }
  .title{
    line-height: 30px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding-left: 15px;
  }
  .research-box{
    width: 200px;
    height: 30px;
    line-height: 30px;
    display: inline-block;
    margin-right: 15px;
  }
  .el-tag-custom {
    height: 45px;
    line-height: 45px;
    width: 150px;
    margin-right: 15px;
    margin-bottom: 15px;
    color: black;
    display: inline-block;
    padding: 0 10px;
    font-size: 12px;
    border-radius: 4px;
    box-sizing: border-box;
    border: 1px solid rgba(64,158,255,.2);
    white-space: nowrap
  }
  .el-tag-0{
    background-color: #F7DEE3;
  }
  .el-tag-1{
    background-color: #E3E2F3;
  }
  .el-tag-2{
    background-color: #D1ECF0;
  }
  .el-tag-3{
    background-color: #F6F4DB;
  }
  .fix-div{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 999;
    background-color: whitesmoke;
    padding-bottom: 15px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    background-color: #00a4eb;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .avatar-box{
    width: 178px;
    height: 240px;
    display: inline-block;
    margin-left: 10px;
  }
</style>
<script type="es6">
  export default {
    data() {
      return {
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();}
        },
        //提交时间
        date:  [],
        formInline: {
          startDate:'',
          endDate:'',
          interviewType: 'ALL',
          city: 'ALL',
          picturesMark: 'ALL',
          associatedProductor:'全部',
          associatedProductorModal:'0',
          associatedMap:'ALL',
          pageNo:1,
          pageSize:10
        },

        total: 0,
        pSize: 10,
        currentPage: 1,

        cityOptions:[],
        typeOptions:[],
        productOptions:[],
        mapOptions:[],

        topData:{},
        tableData: [],
        ruleForm: {
          interviewTitle: '',
          interviewText:'',
          interviewType:'',
          city:'',
          associatedProductor:'',
          associatedMap:'',
          interviewPictureList:""
        },
        rules: {
          interviewTitle: [
            { required: true, message: '请输入访谈标题', trigger: 'blur' }
          ],
          interviewText: [
            { required: true, message: '请输入访谈内容', trigger: 'blur' }
          ],
          interviewType: [
            { required: true, message: '请选择访谈类型', trigger: 'blur' }
          ],
          city: [
            { required: true, message: '请选择访谈城市', trigger: 'blur' }
          ],
          associatedProductorModal: [
            { required: true, message: '请选择关联产品', trigger: 'blur' }
          ]
        },
        detail:{},
        show:false,
        tableData2:[],
        typeTag:"",
        imageUrl:[],
        uploadConfig: {
          type:'Img'
        },
      }
    },
    mounted(){
      this.setDate()
      this.getCityList()
      this.getTypeList()
      this.getProduct()
    },
    methods: {
      //页数
      handleSizeChange(val) {
        this.formInline.pageSize= val
        this.pSize = val;
        this.dataList();
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.formInline.pageNo= val
        this.dataList();
      },
      // 获取当前日期和当前日期前一个月
      formatDate(date) {
        var month=Number(date.getMonth()) + 1
        if(month<10){
          month='0'+month
        }
        return date.getFullYear()+'-'+month+'-'+date.getDate();
      },
      setDate(){
        var nowdate = new Date();
        var startDate=this.formatDate(new Date(nowdate - 30*24*3600*1000))
        var endDate=this.formatDate(nowdate)
        this.formInline.startDate=startDate
        this.formInline.endDate=endDate
        this.date=[startDate,endDate]
        this.getData();
      },
      getData(){
        this.getDataTop()
        this.dataList()
      },
      // 获取城市列表
      getCityList(){
        this.$http.post(this.GLOBAL.host,{
          method:'getOnlineSalesCity',
          query:{
            province:''
          }
        })
        .then((res) => {
          this.cityOptions=res.data.data;
        })
        .catch((error) => {

        });
      },
      // 获取到访谈类型
      getTypeList(){
        this.$http.post(this.GLOBAL.host,{
          method:'getDictionary',
          query:{
            cnName:'数据采集_访谈类型'
          }
        })
        .then((res) => {
          this.typeOptions=res.data.data.dictionary;
        })
        .catch((error) => {

        });
      },
      // 获取到关联产品
      getProduct(){
        this.$http.post(this.GLOBAL.host,{
          method:'DataAc_API3012',
          query:{
            "categoryId": 0
          }
        })
        .then((res) => {
          this.productOptions=res.data.data;
          this.getMap()
        })
        .catch((error) => {

        });
      },
      // 获取到用户地图
      getMap(){
        this.$http.post(this.GLOBAL.host,{
          method:'DataAc_API6011',
          query:{
            "productId":this.formInline.associatedProductor
          }
        })
        .then((res) => {
          if(res.data.code=='200'){
            this.mapOptions=res.data.data;
          }else{
            this.mapOptions=[]
          }

        })
        .catch((error) => {

        });
      },
      // 时间范围改变时
      changeDate(val){
        this.formInline.startDate=val[0]
        this.formInline.endDate=val[1]
      },
      // 访谈累计、未读、地区数量
      getDataTop(){
        this.$http.post(this.GLOBAL.host,{
          method:'DataAc_API6020',
          query:this.formInline
        })
        .then((res) => {
          this.topData=res.data.data;
        })
        .catch((error) => {
          this.topData={}
        });
      },
      // 获取到用户访谈列表
      dataList(){
        if(this.formInline.associatedProductorModal!='全部'){
          for(var i in this.productOptions){
            if(this.productOptions[i].productId==this.formInline.associatedProductorModal){
              this.formInline.associatedProductor=this.productOptions[i].productName;
              break;
            }
          }
        }else{
          this.formInline.associatedProductor='全部'
        }
        this.$http.post(this.GLOBAL.host,{
          method:'DataAc_API6010',
          query:this.formInline
        })
        .then((res) => {
          this.tableData=res.data.data.list;
          this.total=res.data.data.total
        })
        .catch((error) => {
          this.tableData=[]
          this.total=0
        });
      },
      // 增加访谈
      addRe(){
        $('#classManage').modal('show')
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.saveRe()
          } else {
            return false;
          }
        });
      },
      // 保存访谈内容
      saveRe(){
        var imgUrlList=''
        imgUrlList=this.imageUrl.join(',')
        this.ruleForm.interviewPictureList=imgUrlList
        this.$http.post(this.GLOBAL.host,{
          method:'DataAc_API6030',
          query:this.ruleForm
        })
        .then((res) => {
          if(res.data.data.RES=='00S'){
            this.$notify({
              title: '成功',
              message: '保存成功',
              type: 'success'
            });
            $('#classManage').modal('hide');
            this.ruleForm={
              interviewTitle: '',
                interviewText:'',
                interviewType:'',
                city:'',
                associatedProductor:'',
                associatedMap:'',
                interviewPictureList:""
            }
            this.imageUrl=[]
            this.getData();
          }else{
            this.$notify.error({
              title: '错误',
              message: '保存失败'
            });
          }
        })
        .catch((error) => {
          this.$notify.error({
            title: '错误',
            message: '保存失败'
          });
        });
      },
      // 查看详情
      showDetail(id){
        $('#detail').modal('show');
        this.$http.post(this.GLOBAL.host,{
          method:'DataAc_API6040',
          query:{
            interviewId:id
          }
        })
        .then((res) => {
          this.detail=res.data.data
        })
        .catch((error) => {
          this.detail={}
        });
      },
      // 删除访谈
      deleteData(id){
        this.$confirm('此操作将删除该访谈, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http.post(this.GLOBAL.host,{
            method:'DataAc_API6060',
            query:{
              "interviewId": id
            }
          })
          .then((res) => {
            if(res.data.data.RES=='00S'){
              this.$notify({
                title: '成功',
                message: '删除成功',
                type: 'success'
              });
              this.dataList()
            }else{
              this.$notify.error({
                title: '错误',
                message: '删除失败'
              });
            }
          })
          .catch((error) => {
            this.$notify.error({
              title: '错误',
              message: '删除失败'
            });
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      handleAvatarSuccess(res, file) {
        this.imageUrl.push(res.fileUrl) ;
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpg';
        const isJPEG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isImg = file.type === isJPG||isJPEG||isPNG;
        const isLt2M = file.size / 1024 / 1024 < 2;
        if(!isImg){
          this.$notify({
            title: '提示',
            message: '只能上传图片格式!',
            type: 'error',
            duration:1000
          });
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isImg&&isLt2M;
      },
      removeImg(index){
        this.imageUrl.splice(index,1)
      }
    }
  };
</script>
